<template>
	<div id="roleUpdateDetails" class="roleUpdateDetails">
		<group label-width="4.5em" label-margin-right="2em" label-align="right">
			<x-switch title="激活" :value-map="[0, 1]" v-model="status" label-align="left"></x-switch>
			<x-input title="角色" v-model="role_name" disabled></x-input>
			<x-input title="角色名" v-model="role_description"></x-input>
		</group>
		<flexbox>
			<flexbox-item>
				<x-button class="flexBtn_confirm" type="primary" @click.native="roleUpdate">确定</x-button>
			</flexbox-item>
			<flexbox-item>
				<x-button class="flexBtn_cancel" type="warn" @click.native="cancelUpdate">取消</x-button>
			</flexbox-item>
		</flexbox>
	</div>
</template>

<script>
	import bus from '@/event/eventBus'
	import NetWorking from '../../../utils/networking'
	import {Group, XInput, XButton, Flexbox, FlexboxItem, XSwitch} from 'vux'

	export default {
		name: "role-update",
		components: {
			Group,
			XInput,
			XButton,
			Flexbox,
			FlexboxItem,
			XSwitch
		},
		data() {
			return {
				id: this.$route.params.id,
				role_name: '',
				role_description: '',
				status: false
			}
		},
		created: function () {
			bus.$emit("barController", 1)
			bus.$emit("setTopSimpleTitle", '个人信息修改')

			let _this = this
			NetWorking.doGet(
				'roles/'+this.id,
				null,
				null
			).then(
				response => {
					let rs = response.data
					if(rs.error_code == 0){
						_this.role_name = rs.role.role_name
						_this.role_description = rs.role.role_description
						_this.status = rs.role.status
					}
				}
			)
		},
		methods: {
			cancelUpdate: function () {
				this.$router.go(-1)
			},
			roleUpdate: function () {
				NetWorking.doPut(
					'roles',
					null,
					{
						id: this.id,
						role_name: this.role_name,
						role_description: this.role_description,
						status: this.status
					},
					null
				).then(
					response => {
						let rs = response.data
						if(rs.error_code == 0){
							this.$router.go(-1)
						}else{
							alert(rs.error_message)
						}
					}
				)
			}
		}
	}
</script>

<style>
	.roleUpdateDetails {
		border: solid;
		border-color: #f7f7fa;
		margin-left: 5px;
		margin-right: 5px;
		margin-top: 56px;
		box-shadow: 5px 5px 5px #888888;
		border-radius: 25px;
		margin-bottom: 100px;
		background-color: white;
	}

	.flexBtn {
		margin-top: 20px;
		margin-bottom: 10px;
		width: 90% !important;
		border-radius: 25px;
	}
</style>